<template>
  <div class="part">
    <div class="header">
      <div header_left>
        <a-button @click="back" type="text">←&nbsp;返回</a-button>
        <span class="division">|</span>
        <span>告警处理</span>
      </div>
      <div header_right>黑马管理员</div>
    </div>
    <div class="main">
      <div class="main_one">
        <p class="warning">告警详情</p>
        <div class="main_one_body">
          <div class="one">
            <div>
              <span class="typeface">警告时间:</span> <span>{{ list.warningTime }}</span>
            </div>
            <div>
              <span class="typeface">一体杆名称:</span> <span>{{ list.poleName }}</span>
            </div>
          </div>
          <div class="two">
            <div>
              <span class="typeface">告警区域:</span> <span>{{ list.areaName }}</span>
            </div>
            <div>
              <span class="typeface">一体杆编号:</span>
              <span v-if="list.handleStatus === 0">未派单</span>
              <span v-else-if="list.handleStatus === 1">已派单</span>
              <span v-else-if="list.handleStatus === 2">已接单</span>
              <span v-else-if="list.handleStatus === 3">已完成</span>
            </div>
          </div>
          <div class="three">
            <div>
              <span class="typeface">故障类型:</span> <span>{{ list.errorType }}</span>
            </div>
            <div>
              <span class="typeface">处置状态:</span> <span>{{ list.handleResult }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="main_two">
        <p class="warning">告警处理</p>
        <div class="main_one_body">
          <div class="one">
            <div>
              <span class="typeface">处理人:</span> <span>{{ list.handleUser }}</span>
            </div>
            <div>
              <span class="typeface">联系方式:</span> <span>{{ list.phonenumber }}</span>
            </div>
          </div>
          <div class="two">
            <div>
              <span class="typeface">处理结果:</span> <span>{{ list.handleResult }}</span>
            </div>
            <div>
              <span class="typeface"> 完成时间:</span> <span>{{ list.handleTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getId } from '../../utils/auth.js'
import { useRouter } from 'vue-router'
const list = getId()

//返回
const router = useRouter()
const back = () => {
  router.push({
    path: '/warnList'
  })
}
</script>
<style lang="scss" scoped>
.part {
  height: 100vh;
  background-color: #f4f6f8;
}
.header {
  height: 64px;
  background-color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .division {
    margin: 0 10px 0 10px;
  }
}
.main {
  padding: 20px 130px;
  .main_one {
    background-color: #ffffff;
    padding-top: 10px;
    .warning {
      border-left: 2px solid #4770ff;
      padding-left: 10px;
    }
    .main_one_body {
      padding: 20px 65px 24px 65px;
      .one {
        display: flex;
        justify-content: space-between;
        padding-left: 60px;
        padding-right: 300px;
        margin-bottom: 20px;
      }
      .two {
        display: flex;
        justify-content: space-between;
        padding-left: 60px;
        padding-right: 300px;
        margin-bottom: 20px;
      }
      .three {
        display: flex;
        justify-content: space-between;
        padding-left: 60px;
        padding-right: 300px;
        margin-bottom: 20px;
      }
    }
  }
  .main_two {
    background-color: #ffffff;
    padding-top: 10px;
    margin-top: 20px;
    .warning {
      border-left: 2px solid #4770ff;
      padding-left: 10px;
    }
    .main_one_body {
      padding: 20px 65px 24px 65px;
      .one {
        display: flex;
        justify-content: space-between;
        padding-left: 60px;
        padding-right: 300px;
        margin-bottom: 20px;
      }
      .two {
        display: flex;
        justify-content: space-between;
        padding-left: 60px;
        padding-right: 300px;
        margin-bottom: 20px;
      }
    }
  }
}
.typeface {
  color: rgb(144, 147, 153);
}
</style>
